<template>
  <!-- 企业底部 -->
  <div class="footer-common">
    <div class="footer">
        <div class="footer-collect" @click="HandleCollect">
            <img src="~@/assets/five_star1.png" v-show="active"/>
            <img src="~@/assets/five_star2.png" v-show="!active"/>
            <span  v-show="active">收藏</span>
            <span class="collect-text"  v-show="!active">收藏</span>
        </div>
        <div @click="HandleShare" class="footer-share">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-icon_share"></use>
            </svg>
            <span>分享</span>
        </div>
        <div class="footer-join">
            <mt-button type="primary" @click="HandelSignProject"   :words="words">{{words}}</mt-button>
        </div>
      
        <!-- 弹出报名项目原因的弹框 -->
        <mt-popup v-model="popupReason" popup-transition="popup-fade" class="popup-reason">
          <p class="title">报名项目</p>
          <p class="reason-title">简述你能胜任的原因(详细地说明能增加你的入选率)</p>
          <textarea placeholder="10-300个字符，描述可以包括你对项目的理解，过往的相关经验，采用的技术方案等。详细地描述能增加你的入选几率。" class="input-detail" v-model="signInReason">

          </textarea>
          <p class="show-title">请选择要展示给需求方的个人/技能信息</p>
          <p class="project-select">选中你要展示的项目经验</p>
          <el-checkbox-group v-model="checkList" class="check-total"   @change="handleProject">
           <el-checkbox :label="item" v-for="(item,index) in expList" :key="index" ></el-checkbox>
          </el-checkbox-group>
          <div class="reason-bottom">
              <el-checkbox v-model="checked" @change="checkRule" name="agree">我承诺如有接触非公开的项目信息，将对这些信息保密。</el-checkbox>
              <mt-button type="primary" class="up-button" @click="handleUp">提交</mt-button>
          </div>
        </mt-popup>
    </div>
    <!-- 弹出分享弹框 -->
    <mt-popup  v-model="popupShare" class="share-layer" @click.native="HandleShare">
    </mt-popup>
    <!--项目弹出窗 -->
    <mt-popup v-model="popProject">
      <div class="popPro">
        <mt-radio
        title="邀请项目列表"
        v-model="checkvalue"
      
        :options="options">
        </mt-radio>
        <mt-button class="okbtn" type="primary" @click="handleInvite">确定</mt-button>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import { Button, Popup } from "mint-ui";
import { ProjectSignIn,DoProjecet ,GetCanInvitPro} from "@/api/user/project";
import { GetExprience} from "@/api/projects";
import { Add } from "@/api/user/collect";
import { Delivery } from "@/api/user/job";
export default {
  name: "tab-first",
  props: {
    cid: Number,
    words: String,
    type:Number,
  },
  data() {
    return {
      id: 0,
      popupShare: false, //分享弹框
      footerWords: "参加项目",
      popupReason: false, //原因弹框
      active: true,
      checkList:[],
      expList:[],
      signInReason:"",
      checked:false,
      popProject:false,
      options:[
      ],
      checkvalue:"",//选择项
    };
  },
  created() {
    this.id =parseInt(this.$store.state.userinfo.id);
    //this.Initialization();
  },
  methods: {
    Initialization(){
      // GetExprience(this.id,this.cid).then(res=>{
      //   this.expList=res.Data;
      // });
    },
    //加入收藏
    HandleCollect() {
  
      if(this.id==0){
        this.$router.push("/auth/login"); 
        return false;
      }
      else{
        this.active = false;
        Add(this.cid,this.type).then(res => {
          if(res.Data){

            this.$toast("收藏成功！");
          }
          else {
            this.$toast("你已经加入到收藏！");
          }
        });
      }
    
    },
    //分享项目
    HandleShare() {
      this.popupShare = !this.popupShare;
      this.$emit('fix',this.popupShare);
    },

    //参与项目,邀请项目
    HandelSignProject() {
     
       if(this.id==0){
        this.$router.push("/auth/login"); 
        return false;
      }
      if(this.type==1){
        GetExprience(parseInt(this.$store.state.userinfo.id),this.cid).then(res=>{
          if(res.StatusCode===200){
            this.expList=res.Data;
             this.popupReason = true;
          }
          else{
            this.$toast(res.Data);
          }
        });
      };
      if(this.type==3){//邀请他做项目
          if(parseInt(this.cid)==this.id){
               this.$toast("不能邀请自己！！");
               return false;
          }
        
          GetCanInvitPro(this.id).then(res=>{
            if(res.Data.lenght==0){
               this.$toast("您目前还没有可邀请的项目，请先去电脑端发布项目吧！");
               return false;
            }
            else{
              this.options=res.Data;
              this.popProject=!this.popProject;
            }
          });
      
      };
      if(this.type==2){//投递职位
          let data={
            'uid':this.id,
            id:this.cid
          }
      Delivery(this.id,this.cid).then(res=>{
          if(res.StatusCode===200){
             this.$toast(res.Data);
          }
          else{
               this.$toast(res.Data);
          }
      });
      }
    },
    //确定选择
    handleInvite(){
     
          DoProjecet(this.cid,this.id,this.checkvalue).then(res=>{
            if(res.StatusCode===200){
                   this.$toast("邀请成功！");
                   this.popProject=false;
            }
            else{
               this.$toast("邀请失败！");
              this.popProject=false;
            }
        });
    },
    //选择项目
    handleProject(value) {
      if(value!=""){
 sessionStorage.setItem('check',"##"+value +"##");
      }
     
    },
    //同意条款
    checkRule(value) {
      sessionStorage.setItem('rule',value);
    },
    //提交
    handleUp() {
      if(this.signInReason=="")
      {
             this.$toast("胜任理由不能为空");
             return false;
      }
      if(sessionStorage.getItem('rule')=="false"){
         this.$toast("请阅读条款并同意");
             return false;
      }
      this.popupReason=false;
      console.log(this.signInReason+sessionStorage.getItem('check'));
       ProjectSignIn(this.id, this.cid,this.signInReason+sessionStorage.getItem('check')).then(res => {
         if(res.StatusCode==200){
              this.$toast(res.Data);
         }
         else{
           this.$toast(res.Data);
         }
      });
    },
  
  }
};
</script>

<style scoped lang="scss">
/* 底部 */
.footer {
  width: 100%;
  height: 65px;
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  background: white;
  border-top: 1px solid #eeeeee;
}

.footer-collect {
  width: 33.3%;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #999999;
  font-size: 18px;
  img {
    width: 18px;
    height: 18px;
    margin-right: 8px;
  }
  .collect-text {
    color: #fd4f00;
  }
}
.footer-share {
  width: 33.3%;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #999999;
  font-size: 18px;
  .icon {
    margin-right: 8px;
  }
}
.footer-join {
  width: 33.3%;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #999999;
  font-size: 18px;
  .icon {
    margin-right: 8px;
  }
}
.footer-join {
  height: 65px;
  background: #3887fe;
  line-height: 65px;
  color: white !important;
  .mint-button {
    background: #3887fe;
    height: 65px;
    width: 100%;
  }
}
.share-layer{
    width: 100%;
    height: 100%;
    background: url('~@/assets/share-tips.png') 100% 0 no-repeat;
}

/* 底部分享弹出层 */
.mint-popup-bottom {
  width: 100% !important;
  padding: 24px 13px 0px 13px;
  .share-to {
    display: flex;
    align-items: center;
    justify-content: center;
    div {
      width: 120px;
      height: 1px;
      border: 1px dashed #282828;
    }
    p {
      margin: 0 50px;
      font-size: 14px;
      color: #282828;
    }
  }
  
  .share-group {
    display: flex;
    div {
      display: flex;
      flex-direction: column;
      flex: 0 0 25%;
      text-align: center;
      align-items: center;
      .icon-bg {
        width: 51.6px;
        height: 51.6px;
        background: pink;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        .icon {
          color: #ffffff;
          font-size: 30px;
        }
      }
      .bg1 {
        background: #06c015;
      }
      .bg2 {
        background: #eb7960;
      }
      .bg3 {
        background: #18abfb;
      }
      .bg4 {
        background: #fec102;
      }
      .bg5 {
        background: #dc4645;
      }
      .bg6 {
        background: #03c6b6;
      }
    }
  }
  .share-group-1 {
    margin-top: 40px;
    margin-bottom: 22px;
  }
  .share-bottom {
    margin-top: 29.3px;
    font-size: 14px;
    color: #999999;
    height: 43.3px;
    line-height: 43.3px;
    border-top: 2px solid #999999;
    text-align: center;
  }
}
// 参加项目原因弹框
.popup-reason{
  width: 390px;
  padding: 0 12px;
  border-radius: 5px;
  color:#666666;
  p{
    font-size: 14px;
  }
  // 标题
  .title{
    height: 35.3px;
    line-height: 35.3px;
    border-bottom: 1px solid #eeeeee;
    font-size: 14px;
  }
  .reason-title{
    height: 35.3px;
    line-height: 35.3px;
    font-size: 14px;
  }
  .input-detail{
    width: 100%;
    background: #f5f5f5;
    border:none;
    padding: 9px 9px 35px 9px;
    color:#666666;
  }
    textarea::-webkit-input-placeholder{
      color:#dcdcdc;
    }
    .project-select{
      color:#999999;
    }
    .show-title{
      height: 38.6px;
      line-height: 38.6px;
      font-size: 14px;
    }
    .check-total{
      margin-bottom: 26.6px;
      margin-top:10px;
      .el-checkbox+.el-checkbox{
        margin:0;
      }
     
    }
    .reason-bottom{
     padding-top: 13px;
     border-top:1px solid #eeeeee;
      .up-button{
      width: 173.3px;
      height: 27px;
      background: #3887fe;
      font-size: 16px;
      display: block;
      margin:20px auto;
    }

    }
    
  }
.popPro{
  min-width: 200px;
  height: 100%;
  .okbtn{
    padding: 0 30px;
    margin: 10px 0 10px 50px ; 
  }
}
</style>
